<template>
  <div>
    <el-form-item label="是否必填">
      <el-switch v-model="_value.required"></el-switch>
    </el-form-item>
    <el-form-item label="必填校验提示" v-show="_value.required">
      <el-input v-model="_value.validateFailMessage" placeholder="必填校验提示" />
    </el-form-item>
    <el-form-item label="描述信息">
      <el-switch v-model="_value.showDescription"></el-switch>
    </el-form-item>
    <el-form-item v-show="_value.showDescription">
      <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="_value.description" placeholder="请输入描述信息" />
    </el-form-item>
    <el-form-item label="数量限制">
      <el-input-number
        controls-position="right"
        :precision="0"
        :min="0"
        v-model="_value.maxNumber"
        placeholder="最多上传几个文件"
      />
    </el-form-item>
    <el-form-item label="限制文件大小">
      <el-input-number controls-position="right" :precision="1" :min="0" v-model="_value.maxSize" placeholder="单个文件最大" />
    </el-form-item>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(["update:modelValue"]);
const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  padding: 0 12px 0 0;
}
</style>
